【愚公系列】2022年11月 微信小程序 |
您所在的位置：网站首页 › vant 表格组件 › 【愚公系列】2022年11月 微信小程序 |
【愚公系列】2022年11月 微信小程序
|
文章目录前言一、表格组件使用1.基础用法1.1 代码1.2 效果总结前言 移动端的页面本应该很少有table表格这样的展示、操作，但总归有这样的需求，然而平时用的vant和iview的小程序组件库都没有table组件，这下面讲解表格组件封装的案例。 github网址：https://github.com/kawaiiz/table_component  在这里插入图片描述使用说明 该组件具有 列表展示模式，勾选模式，展开行模式。 复制/miniprogram/public/components/public下面的三个组件，到你的公共组件文件夹下（其实这三个组件也是也可以合为一体，因为empty与load_more组件是可以单独使用的，所以没有放到table组件中）在需要使用的页面引入table组件即可。1、相关接口 属性： 参数 说明 类型 默认值 是否必填 columns 表格的配置 Columns[] [] true dataList 数据 any[] [] true getListLoading 请求列表的loading boolean false true showTipImage 无数据时的提示文本图片 boolean false true rowKey 用于指明行的唯一标识符，在勾选中有使用 string id false tableHeight table高度。 string 600rpx false tipTitle 无数据时的提示文本主标题 string 提示 false tipSubtitle 无数据时的提示文本副标题 string 暂无数据 false scrollX 是否需要X轴滚动。 boolean false false select 控制是否出现勾选。 boolean false false selectKeys 勾选的初始值 any[] [] false generic:action-td 当列表项内具有操作列，需要在columns内添加type:action的一项，操作列的内容往往需要自定义，小程序不提供react,vue的rander函数，所以使用到了抽象节点，该属性指明抽象节点的组件。操作列位置可以不固定，点击事件由bindclickaction触发 component undefined false isExpand 控制是否点击展开。 boolean false false expandValueKey 展开信息的key值 string false initExpandValue 当展开信息为空时的默认提示语 string ‘暂无信息’ false expandStyle 展开信息的最外层的样式 string ‘’ false generic:expand-component 如果展开区域的内容需要自定义，expandValueKey设置为空字符串，则切换到组件模式，传一个组件进来，展开区域的点击事件由bindclickexpand触发 component undefined false dynamicValue 给自定义内容的动态值，用于改变状态 ，建议{value:放的数据} object {} false 事件： 事件 解释 类型 bindclicklistitem 点击列表行事件 Function(e); e.detail.value = {index:number（当前行序号）,item: any（当前行的内容）} bindclickexpand 点击展开内容事件 Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在expand-component里)} bindclickaction 点击抽象节点事件 Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在action-td里)} bindonactionevent 抽象节点内的业务事件触发 Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在action-td里)} bindcheckkey 勾选事件 返回被勾选项的rowKey数组 Function(e); e.detail.value = any[]//(数组内每一项是rowKey字段定义的数据的toString()结果) bindscrolltolower 滚动触底 Function() bindscrolltoupper 滚动触顶 Function() 列配置： 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 事件 解释 类型 必填 title 字段名中文含义 string true key 字段名 string true width 单元格宽度 string false type 判断字段是否是自定义组件 ‘action’/undefined false render td内内容由函数返回 (value: any, item: any, index: number, data?: 当前页面的this.data) => any,// 设置内容 function false 一、表格组件使用1.基础用法1.1 代码{ "component": true, "usingComponents": { "table": "/public/components/public/table/table" } }var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); }; import { mockData } from '../../../../public/utils/util'; const app = getApp(); Component({ options: { addGlobalClass: true, }, properties: {}, data: { tableColumns: [{ title: "姓名", key: "name", }, { title: "年龄", key: "age", }, { title: "性别", key: "sex", }], dataList: [], pageNum: 1, pageSize: 10, pageCount: 1, getListLoading: false, }, methods: { options: {}, handleClickItem(e) { console.log(e); const { index, item } = e.detail.value; wx.showToast({ title: `点击第${index + 1}行` }); }, getList() { return __awaiter(this, void 0, void 0, function* () { try { const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data; if (pageNum > pageCount) return; if (getListLoading) return; this.setData({ getListLoading: true, }); const res = yield mockData('list', { id: 1, name: '兼职人员', age: 10, sex: '男', }, "name", pageNum, pageSize); this.setData({ dataList: dataList.concat(res.data.list), pageCount: res.data.pageCount, getListLoading: false, pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, }); } catch (e) { this.setData({ getListLoading: false, }); console.log(e); } }); }, initComponent() { this.getList(); }, }, lifetimes: { attached: function () { }, ready: function () { this.initComponent(); }, moved: function () { }, detached: function () { }, }, pageLifetimes: { show: function () { }, hide: function () { }, resize: function () { }, }, });1.2 效果 在这里插入图片描述总结本表格组件还可支持 设置滚动区域高度横向滚动上拉加载和下拉重置刷新自定义TD内容和多选展开批量修改和单元格监听等等功能 |
【本文地址】
今日新闻 |
推荐新闻 |